Css

Bounce loading

Bounce loading, someone asked me to explain?
By:
Css

Create a bounce loader animation.

Bounce loading

HTML CODE:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pure CSS for circular animation</title>
    <link href="~/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="bouncing-loader">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

CSS CODE:

@keyframes bouncing-loader {
    from {
        opacity: 1;
        transform: translateY(0);
    }
 
    to {
        opacity: 0.1;
        transform: translateY(-1rem);
    }
}
 
.bouncing-loader {
    display: flex;
    justify-content: center;
}
     .bouncing-loader > div {
        width: 1rem;
        height: 1rem;
        margin: 3rem 0.2rem;
        background: #8385aa;
        border-radius: 50%;
        animation: bouncing-loader 0.6s infinite alternate;
    }
 
        .bouncing-loader > div:nth-child(2) {
            animation-delay: 0.2s;
        }
 
        .bouncing-loader > div:nth-child(3) {
            animation-delay: 0.4s;
       }

Description

Note:1remUsually it is16px .

  1. @keyframesAn animation with two states is defined in which the elements are changedopacityand usedtransform: translateY()on a 2D planetransform: translateY().

  2. .bouncing-loaderIs the parent container of the bounce circle, use display: flexandjustify-content: centerplace them in a central position.

  3. .bouncing-loader > div, the three children of the parentdivas a style.divThe width and height are 1remused toborder-radius: 50%change them from square to round.

  4. margin: 3rem 0.2remSpecify the top/bottom margin of each circle as the3remleft/right margin 0.2remso that they do not directly touch each other, giving them some breathing space.

  5. animationIs an abbreviation attribute for various animation properties: useanimation-name, animation-duration, animation-iteration-count, animation-direction.

  6. nth-child(n)The target is the nth child of its parent element.

  7. animation-delayUsed for the second and third respectively div, so that each element does not start the animation at the same time.

Related Article

Post your comments / questions



Recent Article